import React, { memo, useEffect } from "react";

import { changeCountAction } from "./store/modules/count";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { changeMessageAction } from "./store/modules/message";


const Home = memo(() => {
  // useSelector监听一整个state，只要state中数据发生变化，就会重新渲染
  // 使用shallowEqual将本次映射的对象与上次的作比较，更改时才重新渲染
  const { message } = useSelector((state) => ({ message: state.message.message }),shallowEqual)
  const dispatch = useDispatch()
  function changeMessage() {
    dispatch(changeMessageAction('你好世界'))
  }

  useEffect(() => {
    console.log('Home渲染');
  })
 
  return (
    <div>
      <div>home: {message}</div>
      <button onClick={e => changeMessage()}>改变文本</button>
    </div>
  )
})

const App = memo((props) => {
  const { count } = useSelector((state) => ({ count: state.count.count }),shallowEqual)
  const dispatch = useDispatch() 
  function changeCountHandle(val) {
    dispatch(changeCountAction(val))
  }

  useEffect(() => {
    console.log('App渲染');
  })

  return (
    <div>
      当前计数：{ count }
      <button onClick={e => changeCountHandle(1)}>+1</button>
      <button onClick={e => changeCountHandle(-1)}>-1</button>
      <Home />
    </div>
  )
});


export default App
